<!--
 * @FilePath     : /vision/src/components/Rank.vue
 * @Author       : 哒哒哒
 * @Date         : 2024-05-26 20:59:59
 * @Description  :  销量排行模块(横向柱状图)-路由
 * Copyright    : G AUTOMOBILE RESEARCH INSTITUTE CO.,LTD Copyright (c) 2024.
-->

<template>
    <div class="com-page" :class="{'fullscreen': isFullScreen}">
        <div class="com-container">
            <div class="com-chart" ref="rank_ref"></div>
        </div>
        <!-- 右上角方法按钮   -->
        <FullSCreenIcon :isFullScreen="isFullScreen" @toggleFullScreen="changeFullScreen"></FullSCreenIcon>
    </div>
  </template>
  
  <script>
  import { throttle } from '@/utils';
  import FullSCreenIcon from './FullScreenIcon/index.vue'
  import FullscreenMixin from './mixins/FullscreenMixin'
  import ThemeMixins from '@/mixins/ThemeMixins';
  export default {
    /* eslint-disable */
    name: 'Rank',
    mixins: [FullscreenMixin, ThemeMixins],
    components: {
        FullSCreenIcon
    },
    data() {
        return {
            // 图标实例
            chartInstance: null,
            // 服务器返回的所有数据
            allData: null,
            // 记录监听事件，用于取消事件
            throttledAdaptScreen: null,
            // 循环展示数据的起点位置
            startValue: 0,
            // 循环展示数据的终点位置
            endValue: 9,
            // 总共的数据条数
            total: 0
        }
    },
    created() {
        this.$socket.registerCallback('rankData', this.getData)
    },
    async mounted() {
        this.initChart();
        this.$socket.send({
            action: 'getData',
            socketType: 'rankData',
            chartName: 'rank',
            value: ''
        })
        this.adaptScreen();
        this.throttledAdaptScreen = throttle(this.adaptScreen, 100)
        window.addEventListener('resize', this.throttledAdaptScreen);
    },
    destroyed() {
        this.$socket.unRegisterCallback('rankData')
        clearInterval(this.timerId);
        window.removeEventListener('resize', this.throttledAdaptScreen)
    },
    methods: {
        // 初始化表格
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.rank_ref, this.theme)
            const initOption = {
                title: {
                    text: '▎地区销售排行',
                    left: 20,
                    top: 20
                },
                grid: {
                    // 四个属性限制了坐标轴的大小
                    top: '40%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    // 以上的是包括标签，而不只是包括坐标轴
                    containLabel: true
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {
                    show:true
                },
                series: [
                    {
                        type: 'bar'   
                    }
                ]
            }
            this.chartInstance.setOption(initOption)
            // 绑定事件,鼠标移入时，关闭定时器
            this.chartInstance.on('mouseover', () => {
                clearInterval(this.timerId)
            })
            // 鼠标移除时，打开定时器
            this.chartInstance.on('mouseout', () => {
                this.startInterval()
            })
        },
        // 获取数据
        async getData(data) {
            // const {data} = await this.$http.get('rank')
            this.allData = data.sort((a, b) => b.value - a.value);
            this.total = this.allData.length;
            // 渲染数据
            this.updateChart()
            // 打开定时器
            this.startInterval();

        },
        // 更新表格
        updateChart() {
            const colorArr = [
                ['#0BA82C', '#4FF778'],
                ['#2E72BF', '#23E5E5'],
                ['#5052EE', '#AB6EE5']
            ]
            const provinceArr = this.allData.map(item=>item.name);
            const valueArr = this.allData.map(item=>item.value);
            const dataOption = {
                xAxis: {
                    data: provinceArr
                },
                dataZoom: {
                    show: false,
                    startValue: this.startValue,
                    endValue: this.endValue
                },
                series: [
                    {
                        data: valueArr,
                        // 根据数据大小来设置柱的颜色
                        itemStyle: {
                            color: (arg) => {
                                let rendColorArr = null;
                                if (arg.data > 300) {
                                    rendColorArr = colorArr[0]
                                } else if (arg.data > 200) {
                                    rendColorArr = colorArr[1]
                                } else {
                                    rendColorArr = colorArr[2]
                                }
                                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                // 百分比为0
                                {
                                    offset: 0,
                                    color: rendColorArr[0]
                                }, 
                                {
                                    offset: 1,
                                    color: rendColorArr[1]
                                }
                            ])
                            }
                        }
                    }
                ]
            }
            this.chartInstance.setOption(dataOption)
        },
        // 根据屏幕尺寸，将图标适配屏幕
        adaptScreen() {
            let chartWidth = this.$refs.rank_ref.offsetWidth;
            let fontSize = (chartWidth / 100) * 3.6
            const adaptOption = {
                title: {
                    textStyle: {
                        fontSize: fontSize
                    },
                },
                series: [
                    {
                        // 柱的宽度
                        barWidth: fontSize,
                        // 柱的样式
                        itemStyle: {
                            // 设置柱的圆角
                            barBorderRadius: [fontSize / 2, fontSize / 2, 0, 0],
                        }
                    }
                ]
            }
            this.chartInstance.setOption(adaptOption)
            this.chartInstance.resize();
        },
        // 打开定时器,实现平移
        startInterval() {
            if(this.timerId) clearInterval(this.timerId);
            this.timerId = setInterval(() => {
                this.startValue = (this.startValue + 1) % this.total
                this.endValue = (this.endValue + 1) % this.total
                this.updateChart()
            }, 2000);
        }
    }
  }
  </script>
  
  <style scoped lang='less'>

  </style>
  